<template>
  <div>
    <!-- 分页 -->
    <div class='tab_company_out' v-if="tableData.length>0">
      <table></table>
      <table id="print-area" border="1px" cellpadding="0px" cellspacing="0px" style="text-align:center; border-style: solid;border-color:#000;font-size:18px;margin-top:40px;	margin-left:20px;	margin-right:20px;">
        <thead>
          <tr>
            <td colspan="4" style="font-size:40px;text-align:center;font-weight:bold;" height="20px">收据签收单</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="4" height="40px" style="text-align:left;">客户名称：{{tableData[0].customername}}</td>
          </tr>
          <tr style="text-align:center;">
            <th style="text-align:center;width:20%;height:40px">收据日期</th>
            <th style="text-align:center;width:25%;height:40px">收据号码</th>
            <th style="text-align:center;width:25%;height:40px">收据金额</th>
            <th style="text-align:center;width:27%;height:40px">备注</th>
          </tr>
          <tr v-for="item in tableData" :key="item.id">
            <td height="40px">{{dateFormat(item.receiptdate)}}</td>
            <td>{{item.receiptcode}}</td>
            <td>{{item.receiptmoney}}</td>
            <td>{{item.description}}</td>
          </tr>
          <tr>
            <td height="40px"></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td height="40px"></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td height="40px">合计</td>
            <td></td>
            <td>{{receiptMoneyTotal}}</td>
            <td></td>
          </tr>
          <tr>
            <td height="30px" style="text-align:left;">尊敬的客户:</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:left;padding-top: 3px;min-height: 30px;text-indent: 1cm">
              您好！请您收到以上发票经核对无误后，烦请签字交由快递公司，非常感谢您的合作。谢谢！

            </td>
          </tr>
          <tr>
            <td colspan="4" style="text-align:left;height: 40px">
              <div style="display: inline-block;width: 30%">签收人:</div>
              <div style="display: inline-block;width: 30%">签收日期:</div>
              <div style="display: inline-block;width: 35%">传真电话:0532-55523168</div>

            </td>
          </tr>
        </tbody>
      </table>
      <!-- <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="收据签收单" width="180">
          </el-table-column>
          <el-table-column label="客户名称" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table> -->
    </div>
  </div>
</template>
<script>
import { formatDate } from '@tapui/utils/date'
export default {
  name: "printReceipt",
  // 制作打印模版组件时，props区域尽量保留。
  props: {
    // 接受的打印数据
    tableData: {
      type: Array,
      default: () => {
        return [{ customername: "1111" }]
      }
    },
    // 每页多少行
    onePageRow: {
      type: Number,
      default: 5
    },
    // 是否插入空白行
    blankLines: {
      type: Boolean,
      default: true
    },
    getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
  },
  data() {
    return {
      receiptMoneyTotal: 0
      // tableData: {
      //   type: Object,
      //   default: () => {
      //     return { nickName: "1111" }
      //   }
      // }
    }
  },
  computed: {
    pages() {
      console.log(this.tableData)
      // 求当前数据能打印的页数
      /* var pages_ = Math.ceil(this.tableData.detail.length / this.onePageRow); // 向上取整数*/
      // return pages_ <= 0 ? 1 : pages_;
      return 1
    },
    chineseTotal() {
      // 计算中文合计，如果忘记传入
      return this.getChineseNumber != null
        ? this.getChineseNumber(this.tableData.total_amount)
        : "您还没有传入getChineseNumber"
    }
  },

  methods: {
    // 格式化日期 yyyy-MM-dd
    dateFormat(dateValue) {
      if (dateValue) {
        return formatDate(new Date(dateValue.replace(new RegExp(/-/gm), '/')), 'yyyy-MM-dd')
      }
    }
  },
  created() {
    console.log(this.tableData)
  }
}
</script>

<style scoped>
</style>

